<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-yellow sidebar-mini">
<!--添加/编辑-->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-addOrEdit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <form id="addOrEditForm" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="specialId" class="col-sm-2 control-label no-padding-right">专业</label>
                        <div class="col-sm-10">
                            <select id="specialId" name="specialId" class="form-control">
                                <option selected="selected" value="">--请选择--</option>
                                <option
                                        th:each="item:${specialList}" th:value="${item.specialId}"
                                        th:text="${item.special}"></option>
                            </select>
                            <input name="special" type="hidden" style="display: none"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="proPart" class="col-sm-2 control-label no-padding-right">结构名称</label>
                        <div class="col-sm-10">
                            <input name="id" type="hidden" style="display: none"/>
                            <input name="proId" type="hidden" style="display: none"/>
                            <input name="proName" type="hidden" style="display: none"/>
                            <input name="proCode" type="hidden" style="display: none"/>
                            <input id="proPart" name="proPart" type="text" class="form-control" maxlength="255"
                                   oninput="removeSpaces(this)"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn_save">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<section class="content-header">
    <h1>产品结构查询</h1>
    <h4>（如果某专业下的产品结构只有一个，则必须是整体；如果产品结构有多个，则可以自定义名称，但不能有整体；）</h4>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div class="row">
                        <div class="form-inline">
                            <div class="form-group">
                                <h4>
                                    项目信息
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-inline">
                            <div style="display:none">
                                <input id="proId" th:value="${project.proId}" type="hidden" style="display: none"/>
                                <input id="proName" th:value="${project.proName}" type="hidden" style="display: none"/>
                                <input id="proCode" th:value="${project.proCode}" type="hidden" style="display: none"/>
                            </div>
                            <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                <label class="control-label">
                                    项目编号：
                                </label>
                                <label class="control-label" th:text="${project.proCode}">
                                </label>
                            </div>
                            <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                <label class="control-label">
                                    项目名称：
                                </label>
                                <label class="control-label" th:text="${project.proName}">
                                </label>
                            </div>
                            <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                <label class="control-label">
                                    项目数量：
                                </label>
                                <label class="control-label" th:text="${project.proQty}">
                                </label>
                            </div>
                            <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                <label class="control-label">
                                    需方：
                                </label>
                                <label class="control-label" th:text="${project.customer}">
                                </label>
                            </div>
                            <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                <label class="control-label">
                                    安装地点：
                                </label>
                                <label class="control-label" th:text="${project.insSite}">
                                </label>
                            </div>
                        </div>
                    </div>
                    <form id="queryForm" class="form-horizontal">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <h4>
                                        搜索条件
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group margin-bottom-none" style="display: none">
                                    <input name="proId" th:value="${project.proId}" type="hidden"
                                           style="display: none"/>
                                </div>
                                <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                    <label class="control-label">
                                        已创建专业
                                    </label>
                                    <label class="control-label">
                                        <select id="selectSpecials" class="form-control selectpicker"
                                                data-actions-box="true" multiple>
                                            <option selected="selected" style="width: 197px"
                                                    th:each="item:${specialList}" th:value="${item.specialId}"
                                                    th:text="${item.special}"></option>
                                        </select>
                                        <input name="haveSpecials" th:value="${specialIds}" type="hidden"
                                               style="display: none"/>
                                    </label>
                                </div>
                                <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                    <label class="control-label">
                                        提交状态
                                    </label>
                                    <label class="control-label">
                                        <select name="status" class="form-control">
                                            <option selected="selected" value="">全部</option>
                                            <option value="0">未提交</option>
                                            <option value="3">已提交</option>
                                        </select>
                                    </label>
                                </div>
                                <button id="btn-search" type="button" class="btn btn-success">
                                    搜索
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="toolbar" class="row">
                    <button shiro:hasPermission="pro:proStrucEdit:edit" onclick="submit('')"
                            class="btn btn-success">批量提交
                    </button>
                    <button shiro:hasPermission="pro:proStrucEdit:edit" onclick="add()"
                            class="btn btn-info">添加
                    </button>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">


    /**
     * 前端去掉空格
     * @param obj
     */
    function removeSpaces(obj) {
        obj.value = obj.value.replace(/\s+/g, '')
    }

    let table, tempTable, tempData = new Array(), currentProject;
    $(function () {
        /**
         * 加载列表
         */
        table = js.table.init({
            url: ctx + "proStrucEdit/list",
            showColumns: true,
            showExport: true,
            uniqueId: 'id',
            columns: [
                {
                    checkbox: true,
                    width: '30px',
                    formatter: function (value, row, index) {
                        // 正常提报并且数据正常状态可以提交选择
                        if (row.compStatus == 0) {
                            return {disabled: false}
                        } else {
                            return {disabled: true}
                        }
                    }
                },
                {
                    title: '序号', width: '60',
                    formatter: function (value, row, index, field) {
                        var pageSize = table.bootstrapTable('getOptions').pageSize;
                        var pageNumber = table.bootstrapTable('getOptions').pageNumber;
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },
                {
                    title: '专业', field: 'special', width: '60',
                    formatter: function (value, row, index) {
                        if (value != null) {
                            return value;
                        } else {
                            return '--';
                        }

                    }
                },
                {
                    title: '产品结构名称', field: 'proPart',
                    formatter: function (value, row, index) {
                        if (value != null) {
                            return value;
                        } else {
                            return '--';
                        }

                    }
                },
                {
                    title: '创建人', field: 'createName', width: '90',
                    formatter: function (value, row, index) {
                        if (value != null) {
                            return value;
                        } else {
                            return '--';
                        }
                    }
                },
                {
                    title: '创建时间', field: 'createTime', width: '90',
                    formatter: function (value, row, index) {
                        if (value != null) {
                            return value;
                        } else {
                            return '--';
                        }

                    }
                },
                {
                    title: '提交状态', field: 'status', width: '80',
                    formatter: function (value, row, index) {
                        if (value != null) {
                            if (value === 0) {
                                return '<label class="badge label-default">未提交</label>';
                            } else if (value === 3) {
                                return '<label class="badge label-success">已提交</label>';
                            }
                        } else {
                            return '--';
                        }
                    }
                },
                {
                    title: '操作', width: '140',
                    formatter: function (value, row, index) {
                        let elements = new Array();
                        if (hasP('pro:proStrucEdit:edit')) {
                            elements.push('<button class="btn btn-info btn-xs" onclick="edit(' + row.id + ')">查看</button>');
                            if (row.status === 0) {
                                elements.push('<button class="btn btn-success btn-xs" onclick="submit(' + row.id + ')">提交</button>');
                            }
                        }
                        if (hasP('pro:proStrucEdit:del')) {
                            elements.push('<button class="btn btn-danger btn-xs" onclick="remove(' + row.id + ')">删除</button>');
                        }
                        return elements.join('');
                    }
                }
            ]
        });
        /**
         * 添加编辑表单专业下拉菜单改变事件
         */
        $("#specialId").change(function () {
            if ($("#specialId option:selected").val() != '') {
                $("#addOrEditForm [name='special']").val($("#specialId option:selected").text());
            } else {
                $("#addOrEditForm [name='special']").val('');
            }
        });

        /**
         * 搜索条件专业下拉菜单改变事件
         */
        $("#selectSpecials").change(function () {
            let ids = $("#selectSpecials").val();
            let idsStr = '';
            for (let i = 0; i < ids.length; i++) {
                idsStr += ids[i] + ',';
            }
            idsStr = idsStr.substring(0, idsStr.length - 1);
            $("#queryForm [name='haveSpecials']").val(idsStr);
        });

        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.table.search(table);
        });
        /**
         * 保存添加/编辑
         */
        $("#btn_save").click(function () {
            $("#btn_save").attr("disabled", "disabled");
            js.validSubmit({
                formId: "addOrEditForm",
                url: ctx + "proStrucEdit/save",
                data: new FormData($("#addOrEditForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.modal.hide('modal-addOrEdit');
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.table.refresh(table);

                }
            });
            $("#btn_save").removeAttr("disabled");
        });

        /**
         * 模态框隐藏事件， 重置表单，重置验证
         */
        js.modal.hideEvent("modal-addOrEdit", function () {
            js.validate.reset("addOrEditForm");
            js.reset("addOrEditForm");
        });
        /**
         * 验证
         */
        js.validate.init("addOrEditForm", {
            fields: {
                specialId: {validators: {notEmpty: {message: '尊敬的用户，选择专业！'}}},
                proPart: {
                    validators: {
                        notEmpty: {message: '尊敬的用户，选输入产品结构！'},
                        threshold: 1, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        // 发送ajax请求到后台查询，返回 valid：true或者false
                        callback: {
                            message: "产品结构已存在或该专业已有整体产品结构，请重新命名本产品结构名称或修改整体的产品结构名称！",
                            callback: function (value, validator) {
                                var flag = false;
                                $.ajax({
                                    url: ctx + 'proStrucEdit/proPartExist', // 请求路径
                                    type: 'POST',
                                    async: false,	// 同步请求，必须是false
                                    data: {
                                        id: $("#addOrEditForm [name='id']").val(),
                                        special: $("#addOrEditForm [name='special']").val(),
                                        proId: $("#addOrEditForm [name='proId']").val(),
                                        proPart: $("#addOrEditForm [name='proPart']").val() // 请求参数
                                    },
                                    success: function (res) {
                                        flag = $.parseJSON(res).valid;
                                    }
                                });
                                return flag;
                            }
                        }
                    }
                }
            }
        });
    });


    /**
     * 提交产品结构
     */
    function submit(idStr) {
        if (idStr === '') {
            let arr = js.table.selectColumns(table, "id");
            idStr = arr.join(',');
        }
        if (idStr === '') {
            js.modal.warning("尊敬的用户，请您选择要提交的产品结构！");
            return;
        }
        js.post({
            url: ctx + 'proStrucEdit/submit',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {
                idStr: idStr
            },
            async: true,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                } else {
                    js.modal.warning(result.msg);
                }
                js.table.refresh(table);
            },
            error: function () {
                js.modal.fail();
            }
        });
    }

    /**
     * 删除产品结构
     */
    function remove(id) {
        js.modal.confirm("警告：您即将将删除此产品结构！！！您确认要执行该操作吗？", function () {
            js.post({
                url: ctx + 'proStrucEdit/remove',
                type: 'post',
                traditional: true,            // 阻止深度序列化， 使参数可以使用数组
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded",
                data: {
                    id: id
                },
                async: true,                // 异步执行
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.table.refresh(table);
                },
                error: function () {
                    js.modal.fail();
                }
            });
        })
    }


    /**
     * 添加产品结构
     */
    function add() {
        $("#modal-addOrEdit .modal-title").text('添加产品结构');
        $("#addOrEditForm [name='proId']").val($("#proId").val());
        $("#addOrEditForm [name='proCode']").val($("#proCode").val());
        $("#addOrEditForm [name='proName']").val($("#proName").val());
        $("#btn_save").show();
        $("#addOrEditForm [name='id']").removeAttr("disabled");
        $("#addOrEditForm [name='proId']").removeAttr("disabled");
        $("#addOrEditForm [name='proName']").removeAttr("disabled");
        $("#addOrEditForm [name='proCode']").removeAttr("disabled");
        $("#addOrEditForm [name='proPart']").removeAttr("disabled");
        $("#addOrEditForm [name='specialId']").removeAttr("disabled");
        $("#addOrEditForm [name='special']").removeAttr("disabled");
        js.modal.open('modal-addOrEdit');
    }

    /**
     * 编辑产品结构
     */
    function edit(id) {
        let row = $("#bootstrap-table").bootstrapTable('getRowByUniqueId', id);
        $("#addOrEditForm").fillData(row);
        $("#modal-addOrEdit .modal-title").text('查看产品结构');
        $("#btn_save").hide();
        $("#addOrEditForm [name='id']").attr("disabled", "disabled");
        $("#addOrEditForm [name='proId']").attr("disabled", "disabled");
        $("#addOrEditForm [name='proName']").attr("disabled", "disabled");
        $("#addOrEditForm [name='proCode']").attr("disabled", "disabled");
        $("#addOrEditForm [name='proPart']").attr("disabled", "disabled");
        $("#addOrEditForm [name='specialId']").attr("disabled", "disabled");
        $("#addOrEditForm [name='special']").attr("disabled", "disabled");
        js.modal.open('modal-addOrEdit');
    }
</script>
</body>
</html>